<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-html-slider-response.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
    <style>
      img {
        width: 300px;
      }
    </style>
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      default_iti: 250, 
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var trial_1 = {
      type: jsPsychHtmlSliderResponse,
      stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(46, 26, 122);"></div>',
      labels: ['Purple', 'Blue'],
      slider_width: 500,
      require_movement: true,
      prompt: '<p>Is this color closer to purple or blue? Use the slider above.</p>'
    };

    var trial_2 = {
      type: jsPsychHtmlSliderResponse,
      stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(29, 23, 138)"></div>',
      labels: ['Purple', 'Blue'],
      slider_start: 10,
      slider_width: 500,
      prompt: '<p>Is this color closer to purple or blue? Use the slider above. (5s time limit; custom starting value).</p>',
      trial_duration: 5000
    };

    var trial_3 = {
      type: jsPsychHtmlSliderResponse,
      stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(63, 17, 129)"></div>',
      labels: ['Purple', 'Blue'],
      prompt: '<p>Is this color closer to purple or blue? Use the slider above. (1s display).</p>',
      slider_width: 500,
      stimulus_duration: 1000
    };

    jsPsych.run([trial_1, trial_2, trial_3]);

  </script>
</html>